<template>
	<view class="skill_index">
		<view class="skill_banner">
			<image src="../../static/banner/banner4.jpg"></image>
		</view>
		
		<view class="skill_type">
			<uni-grid :column="4" :show-border="false"  :square="false">
				<uni-grid-item>
					<view :class="timeIndex==0?'item ck':'item'" @click="timeChange(0)">
						<view class="title">{{timeList[0]||'00'}}:00 场</view>
						<view class="name">已开始</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view :class="timeIndex==1?'item ck':'item'" @click="timeChange(1)">
						<view class="title">{{timeList[1]||'00'}}:00 场</view>
						<view class="name">预约中</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view :class="timeIndex==2?'item ck':'item'" @click="timeChange(2)">
						<view class="title">{{timeList[2]||'00'}}:00 场</view>
						<view class="name">预约中</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view :class="timeIndex==3?'item ck':'item'" @click="timeChange(3)">
						<view class="title">{{timeList[3]||'00'}}:00 场</view>
						<view class="name">预约中</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="time_start">
			<text class="item">{{timeList[0]||'00'}}:00 场</text> 距离结束 {{timeFormat}}
		</view>
			
		<!-- 产品 -->
		<view class="goods_list">
			<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
				<view class="list">
					<uni-grid :column="2" :show-border="false"  :square="false" :highlight="false">
						<uni-grid-item class="grid_item" v-for="(v,k) in list" :key="k">
							<view class="item" @click="$nav('/pages/goods/info?id='+v.id)">
								<image :src="v.goods_master_image||''" mode="aspectFit"></image>
								<view  class="goods_name">{{v.goods_name}}</view>
								<view class="price">
									<text class="goods_price">￥{{v.goods_price||'0.00'}}</text>
									<text class="market_price">￥{{v.goods_market_price||'0.00'}}</text>
								</view>
								
							</view>
						</uni-grid-item>
						
					</uni-grid>
				</view>
			</mescroll-body>
		</view>
		
	</view>
</template>

<script>
	import moment from "moment";  
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				timeList:[],
				timeFormat:' 00 : 00 : 00 ',
				timeIndex:0,
				list:[],
				params:{
					page:1,
					per_page:10,
					total:0,
					start_time:0,
				},
			};
		},
		onLoad() {
			this.timeList = [moment().format('H'),moment().add(1,'hours').format('H'),moment().add(2,'hours').format('H'),moment().add(3,'hours').format('H')]
			this.timing();
		},
		methods:{
			timeChange(e){
				this.params.start_time = e;
				this.page = 1;
				this.timeIndex = e;
				this.mescroll.resetUpScroll();
			},
			timing(){
				let endTime = moment().add(1,'hours').format('YYYY-MM-DD HH')+':00:00';
				let obj = setInterval(()=>{
					let timeVal = moment(endTime).format('X') - moment().format('X');
					// 时间戳转换
					var d = Math.floor(timeVal / (24 * 3600));
					var h = Math.floor((timeVal - 24 * 3600 * d) / 3600);
					var m = Math.floor((timeVal - 24 * 3600 * d - h * 3600) / 60);
					var s = Math.floor((timeVal - 24 * 3600 * d - h * 3600 - m * 60));
					// console.log(d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 打印出转换后的时间
					//  当时分秒小于10的时候补0
					var hh = h < 10 ? '0' + h : h;
					var mm = m < 10 ? '0' + m : m;
					var ss = s < 10 ? '0' + s : s;
					// this.seckills.format_time =  d + '天' + hh + '时' + mm + '分' + ss + '秒';
					this.timeFormat = ' '+hh+' : '+mm+' : '+ss
					if(moment(endTime).valueOf()<moment().valueOf()){
						clearInterval(obj);
						this.$router.go(0);
					}
				},1000)
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				this.$http(this.$api.seckills,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		},
		
		
	}
</script>

<style lang="scss">
.skill_index{
	.skill_banner{
		height: 300rpx;
		image{
			width: 100%;
			height: 300rpx;
			background-color: #ccc;
		}
	}
	.goods_list{
		margin:30rpx 30rpx;
		.list{
			.grid_item:nth-child(2n){
				.item{
					margin-right: 0;
					margin-left: 10rpx;
				}
			}
			.item{
				margin-right: 5rpx;
				margin-bottom: 15rpx;
				border-radius: 6rpx;
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx;
				image{width: 100%;background: #eee;border-radius: 6rpx;height: 300rpx;box-sizing: border-box;}
				.comment{color:#999;font-size: $uni-font-size-sm;line-height: 60rpx;padding-left: 5rpx;}
				.price{
					.goods_price{color:$uni-color-error;margin-right: 20rpx;}
					.market_price{color:#ccc;font-size: $uni-font-size-sm;text-decoration: line-through;}
				}
				.goods_name{line-height: 60rpx;text-align: left;font-size: $uni-font-size-base;width: 100%;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; }
			}
		}
	}
	.time_start{
		line-height: 90rpx;
		text-align: center;
		background-color: #fff;
		font-size: $uni-font-size-base;
		font-weight: bold;
		.item{
			border:1px solid $uni-color-error;
			color:$uni-color-error;
			border-radius: 8rpx;
			margin-right: 20rpx;
			padding: 0 20rpx;
			font-size: $uni-font-size-sm;
		}
	}
	.skill_type{
		// border: 1px solid #efefef;
		line-height: 50rpx;
		font-size: $uni-font-size-lg;
		background-color: #f5f5f5;
		.item{
			padding: 15rpx 0;
			cursor: pointer;
			text-align: center;
			.title{
				font-size: $uni-font-size-base;
				font-weight: bold;
				line-height: 50rpx;
				margin-right: 10rpx;
			}
			.name{
				font-size: $uni-font-size-base;
				line-height: 50rpx;
				color:#666;
			}
			&.ck{
				background: $uni-color-error;
				color:#fff;
				.title{
					font-weight: bold;
					color:#fff;
				}
				.name{
					color:#fff;
				}
			}
		}
	}
}
</style>
